<template>
    <div class="login_page">
        <div class="login_from">
            <font class="page_title">淘书</font>
            <div class="input_box">
                <font class="input_box_title">用户登录</font>
                <Input v-model="userId" clearable prefix="ios-contact" size="large" placeholder="请输入账号" class="user_id" />
                <Input v-model="userPassword" clearable type="password" prefix="md-lock" size="large" placeholder="请输入密码" class="user_password" />
                <Button type="error" @click="goToIndexPage()" class="login_btn">登录</Button>
                <div class="bottom_box">
                    <!-- <font @click="aa()"  class='bottom_btm'>忘记密码</font> -->
                    <font @click="userRegister()" class='bottom_btm'>免费注册</font>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { userService } from '../../service/userService'
export default {
    data() {
        return {
            userId: '',
            userPassword: '',
        }
    },
    methods: {
        userRegister() {
            this.$router.push('/registerMail');
        },
        goToIndexPage() {
            if (!this.userId) {
                this.$Message.error("请输入账号");
                return;
            }
            if (!this.userPassword) {
                this.$Message.error("请输入密码");
                return;
            }
            if(userService.checkUser(this.userId, this.userPassword)){
                this.$router.push('/bookList');
            } else {
                this.$Message.error("账号或密码错误！");
            }
        }
    }
}
</script>

<style scoped>
.login_page{
    position: fixed;
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
    background-size: 1920px 974px;
    background-image: url("../../assets/background.jpg");
}
.login_from{
    position: fixed;
    left: 400px;
    top: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.page_title{
    font-size: 50px;
    color: rgb(245, 14, 14);
}
.input_box{
    background: white;
    padding: 20px 20px 15px;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
}
.input_box_title{
    font-size: 25px;
    font-weight: 800
}
.user_id{
    margin-top: 22px;
    width: 300px;
}
.user_password{
    margin-top: 25px;
    width: 300px;
}
.login_btn{
    margin-top: 25px;
}
.bottom_box{
    margin-top: 15px;
    text-align: right;
    padding: 0 5px;
}
.bottom_btm{
    font-size: 15px;
}
</style>
